<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品卡片布局</title>
		<style>
			/*思路：1.去除元素默认外边距【通配选择器】  设置背景颜色
			    2.product_card 设置样式：内边距，边框设置颜色，加倒角
				加阴影，所有内容--居中：text-align:center
				3.图片边框倒角，外边距？
				4.小米SU7  文字：外边距？
				5.￥279999.00 文字大小，外边距？
				6.颜色，外边距？内边距？
				*/
			  #product_card{
				  width: 300px;
				  height: 400px;
				  text-align: center;
				  border: 1px solid #cecece;
                  padding: 20px;
				  box-shadow: 4px 4px 4px 4px #cecece;
				  border-radius: 10px 10px 10px 10px;
				  }
				 
				h3{
					border-top: 20px;
				}
				#p1{
					color: orangered;
				}
			    p{
					color: #9e9e9e;
				}
				  
				  
			  
		</style>
	</head>
	<body>
			<div id="product_card">
				<img src="img/su7_海报 (2).jpg" alt="SU7" width="260px" height="350px">
				<h3>小米su7</h3>
				<p id="p1">￥279999.00</p>
				<p>已有<span>10万+</span>人评价</p>
			</div>
	</body>
</html>